<template>
	<view class="business">
		<view class="containers">
			<view class="tui_search">
				<view v-if="navTab == 1">
					<tui-searchbar :value="attendanceName" radius="40rpx" placeholder="搜索考勤记录" @search="nameChange" @clear="nameClear"></tui-searchbar>
				</view>
				<view v-else>
					<tui-searchbar :value="infoName" radius="40rpx" placeholder="搜索数据处理记录" @search="nameChange" @clear="nameClear"></tui-searchbar>
				</view>
			</view>
			<view class="containers notify withtab">
				<view class="ctnt1 placehold" v-show="navTab == 1">
					<view v-if="attendanceList.length > 0">
						<view class="feed-item" v-for="(item,index) in attendanceList" :key="item.id" @click.stop="toDetail(item.id,1)">
							<view class="content-business flex-item">
								<a class="content-left">
									<text class="content-title-a flex-item">{{item.name|filterMore(11)}}({{item.idCard}})</text>
								</a>
								<a class="content-right">
									<text class="content-title-b" v-if="item.attendanceStatus == 1">正常</text>
									<text class="content-title-b" v-else-if="item.attendanceStatus == 2">迟到</text>
									<text class="content-title-b" v-else-if="item.attendanceStatus == 3">早退</text>
									<text class="content-title-b" v-else-if="item.attendanceStatus == 4">事假</text>
									<text class="content-title-b" v-else-if="item.attendanceStatus == 5">调休假</text>
									<text class="content-title-b" v-else-if="item.attendanceStatus == 6">旷工</text>
									<text class="content-title-b" v-else-if="item.attendanceStatus == 7">正常上班</text>
								</a>
							</view>
							<view class="content-title flex-item">
								<a class="content-left">
									<text class="content-a">企业名称：{{item.enterpriseName}}</text>
								</a>
								<a class="content-right">
									<text class="content-a"></text>
								</a>
							</view>
							<view class="content-title flex-item">
								<a class="content-left">
									<text class="content-a">公司考勤时间：{{item.enterpriseAttendanceTime}}</text>
								</a>
								<a class="content-right">
									<text class="content-a">实际打卡时间：{{item.actualAttendanceTime}}</text>
								</a>
							</view>
							<view class="content-title-status">
								<text>审核状态</text>
								<tui-switch disabled :checked="item.examineStatus == 1 ? true : false" scaleRatio="0.7" color="#EED1A7"></tui-switch>
							</view>
						</view>
					</view>
					<view v-else>
						<tui-no-data style="margin-top: 0rpx;" imgUrl="/static/images/my_course_empty.png">暂无数据</tui-no-data>
					</view>
				</view>
				<view class="ctnt1 placehold" v-show="navTab == 2">
					<view v-if="infoList.length > 0">
						<view class="feed-item" v-for="(item,index) in infoList" :key="item.id" @click.stop="toDetail(item.id,2)">
							<view class="content-business flex-item">
								<a class="content-left">
									<text class="content-title-a flex-item">{{item.name|filterMore(11)}}({{item.idCard}})</text>
								</a>
								<a class="content-right">
									<text class="content-title-b" v-if="item.sex == 1">男</text>
									<text class="content-title-b" v-else-if="item.sex == 2">女</text>
								</a>
							</view>
							<view class="content-title flex-item">
								<a class="content-left">
									<text class="content-a">教育程度：{{item.educationLevel}}</text>
								</a>
								<a class="content-right">
									<text class="content-a"></text>
								</a>
							</view>
							<view class="content-title flex-item">
								<a class="content-left">
									<text class="content-a">户籍：{{item.registeredResidence}}</text>
								</a>
								<a class="content-right">
									<text class="content-a">民族：{{item.nation}}</text>
								</a>
							</view>
							<view class="content-title-status">
								<text>审核状态</text>
								<tui-switch disabled :checked="item.examineStatus == 1 ? true : false" scaleRatio="0.7" color="#EED1A7"></tui-switch>
							</view>
						</view>
					</view>
					<view v-else>
						<tui-no-data style="margin-top: 0rpx;" imgUrl="/static/images/my_course_empty.png">暂无数据</tui-no-data>
					</view>
				</view>
			</view>
			<!--加载loadding-->
			<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
			<tui-nomore v-if="!pullUpOn" backgroundColor="#f7f7f7" style="width: 100%;"></tui-nomore>
			<!--加载loadding-->
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	const app = getApp()
	export default {
		data() {
			return {
				domainImg: util.domainImg,
				attendanceList: [],
				infoList: [],
				infoList: [],
				navTab: 1,
				hideModal: false,

				actions: [{
					name: '修改',
					color: '#fff',
					fontsize: 30,
					width: 70,
					background: '#5677fc'
				}, {
					name: '删除',
					color: '#fff',
					fontsize: 30,
					width: 70,
					background: '#FD3B31'
				}],

				pageNum: 1,
				pages: '',
				loadding: false,
				pullUpOn: true,
				
				attendanceName: "",
				infoName: ""
			}
		},
		filters: {
			// 文字省略号
			filterMore(value, num) {
				if (!value) return '--'
				if (value.length > num) {
					return value.slice(0, num) + '...'
				}
				return value
			},
			// 时间处理
			filterDate(value, num) {
				if (!value) return '--'
				if (value.length > num) {
					return value.slice(0, num)
				}
				return value
			}
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			this.pageNum = 1;
			this.pullUpOn = true;
			this.loadding = false;
			this.getList();
			uni.stopPullDownRefresh();
		},
		// 上拉加载
		onReachBottom: function() {
			this.loadding = true;
			if (this.pageNum == this.pages) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.getList(true);
				this.loadding = false;
			}
		},
		onLoad(options) {
			if (options.type) {
				this.navTab = options.type;
			}
			if (this.navTab == 1) {
				uni.setNavigationBarTitle({
					title: '考勤记录'
				});
			} else if (this.navTab == 2) {
				uni.setNavigationBarTitle({
					title: '数据处理记录'
				});
			}
		},
		onShow() {
			this.getList();
		},
		methods: {
			// 获取数据
			getList(selet_type) {
				let loadData;
				this.pullUpOn = true;
				this.pages = "";
				if (this.navTab == 1) {
					// 考勤记录
					if (selet_type) {
						loadData = JSON.parse(JSON.stringify(this.attendanceList));
						this.pageNum = this.pageNum + 1;
					}
					util.request('disabled/pageDisabledAttendance', {
						name: this.attendanceName,
						pageNum: this.pageNum,
						pageSize: 5
					}, "POST").then(res => {
						if (res.code == 1) {
							this.attendanceList = res.data.content
							this.pages = res.data.totalPages
							if (selet_type) {
								this.attendanceList = loadData.concat(res.data.content);
							}
						} 
					});
				} else if (this.navTab == 2) {
					// 数据处理记录
					if (selet_type) {
						loadData = JSON.parse(JSON.stringify(this.infoList));
						this.pageNum = this.pageNum + 1;
					}
					util.request('disabled/pageDisabledCheck', {
						name: this.infoName,
						pageNum: this.pageNum,
						pageSize: 5
					}, "POST").then(res => {
						if (res.code == 1) {
							this.infoList = res.data.content
							this.pages = res.data.totalPages
							if (selet_type) {
								this.infoList = loadData.concat(res.data.content);
							}
						} 
					});
				}
			},
			// 跳转详情
			toDetail(id,type) {
				uni.navigateTo({
					url: `/pages/business/detail/detail?id=${id}&type=${type}`,
				})
			},
			// 筛选条件
			nameChange(e) {
				if (this.navTab == 1) {
					this.attendanceName = e.value;
				} else {
					this.infoName = e.value;
				}
				this.pageNum = 1;
				this.getList();
			},
			// 清除筛选条件
			nameClear() {
				if (this.navTab == 1) {
					this.attendanceName = "";
				} else {
					this.infoName = "";
				}
				this.pageNum = 1;
				this.getList();
			},
		}
	}
</script>
<style lang="scss">
	/**index.wxss**/
	.business {
		.businessAdd {
			width: 100vw;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 1000;
		}
		.tui_search {
			width: 100vw;
		}
		.tui_search .tui-searchbar__box {
			background: transparent !important;
		}
	}
	
	.containers .search .search-left image {
		display: inline-block;
		width: 35rpx;
		height: 35rpx;
		padding: 15rpx 15rpx 15rpx 20rpx;
	}

	.containers .search .search-right {
		flex: 1;
	}

	.containers .search .search-right image {
		width: 45rpx;
		height: 45rpx;
		padding: 10rpx;
	}

	.containers {
		padding: 0;
		font-size: 14rpx;
		background: #F0F4F3;
		color: #000;
	}

	.addtab {
		color: #333333;
		align-items: center;
		text-align: end;
		margin-right: 20rpx;
		padding: 0rpx 10rpx;
	}

	.tab {
		background: #ffffff;
		height: 100rpx;
		box-shadow: 0 2px 2px #dadada;
		display: flex;
		align-items: center;
		width: 100%;
		display: flex;
		color: #999999;
		margin-left: 10rpx;
		margin-right: 10rpx;

	}

	.tab-button {
		height: 100rpx;
		background: #eeeeee;
		color: #777676;
		font-size: 28rpx;
		box-shadow: 0 2px 2px #dadada;
		margin: 0 0 8rpx 0;
		top: 0;
		width: 30%;
	}

	.top-tab {
		height: 90rpx;
		background: #ffffff;
		color: #999999;
		font-size: 28rpx;
		line-height: 90rpx;
		box-shadow: 0 2px 2px #eeeeee;
		margin: 0rpx 20rpx 20rpx 20rpx;
		position: fixed;
		top: 0;
		z-index: 999;
		width: 100%;
	}

	.toptab.active {
		color: #1A222D;
		border-bottom: solid 2px #202226;
		margin-left: 20rpx;
		margin-right: 20rpx;

	}

	.toptab {
		color: #9C9C9C;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.btn {
		width: 80%;
		background-color: #EED1A7;
		color: #1A222D;
		margin-left: 10px;
		font: size 28rpx;
		margin-top: 10px;
		border-radius: 20px;
		font-size: 30rpx;
		padding: 6rpx;
		font-weight: 700
	}

	.add-btn {
		width: 80%;
		background-color: #eed1a4;
		color: #1A222D;
		margin-top: 20px;
		font-weight: normal;
		border-radius: 10px;
		font-size: 30rpx;
		padding: 5rpx;
		margin-bottom: 20rpx;

	}

	.content {
		display: flex;
		width: 100%;
		left: 0;
		height: 50rpx;
		font-size: 30rpx;
	}

	.content-title {
		width: 100%;
		left: 0;
		height: 40rpx;
		font-size: 22rpx;
		margin-top: 10rpx;
	}

	.content-business {
		width: 100%;
		left: 0;
		height: 80rpx;
		font-size: 30rpx;
		margin-top: 10rpx;
		border-bottom: 1px solid #E8E8E8;
	}

	.content-left {
		justify-content: left;
		float: left;
		margin-top: 10rpx;
	}

	.content-right {
		justify-content: right;
		float: right;
		margin-top: 10rpx;

	}

	.content-title-a {
		color: black;
		margin-right: 20rpx;
	}

	.content-title {
		color: black;
		margin-right: 20rpx;
	}

	.content-title-a {
		color: black;
		margin-right: 20rpx;
		margin-top: 6rpx;
	}

	.content-a {
		width: 50%;
		color: rgb(167, 165, 165);
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.content-title-b {
		background-color: #F4E2C8;
		color: #1E2129;
		font-weight: normal;
		border-radius: 10px;
		font-size: 30rpx;
		padding-top: 8rpx;
		padding-bottom: 8rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.content-title-status {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 0;
		font-size: 24rpx;
		color: #333;
		margin-top: 30rpx;
		border-top: 1px dashed #E8E8E8;
	}

	.containers .feed-item {
		// width: 90%;
		padding: 20rpx 20rpx 30rpx 20rpx;
		margin: 20rpx;
		// background: #ffffff;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		box-shadow: 20rpx 2px 5px #eeeeee;
		border-radius: 10px;
	}

	.containers .tui-swipeout-wrap {
		background: transparent !important;
	}

	/*feed-item part is in app.wxss for multiplexing*/
</style>